<template>
  <node-common
    title="Java增强"
    iconName="llm-node"
    :isSelected="isSelected"
    :isHovered="isHovered"
    :model="model"
    :menus="menus"
    @handleMenu="handleMenu"
  >
    <div class="content">
      <div class="node-key-value">
        <div class="node-key-value-item">
          <div class="node-key-value-item-key" style="width: 58px"><span>输入变量</span></div>
          <div class="node-key-value-item-value">
            <span>{{ getInputParams }}</span>
          </div>
        </div>
        <div class="node-key-value-item">
          <div class="node-key-value-item-key" style="width: 58px"><span>增强类型</span></div>
          <div class="node-key-value-item-value">
            <span>{{ props.properties.options.enhance.type=='class'?'类路径':'Spring Bean'}}</span>
          </div>
        </div>
        <div class="node-key-value-item">
          <div class="node-key-value-item-key" style="width: 58px"><span>{{ props.properties.options.enhance.type=='class'?'类路径':'Bean名称'}}</span></div>
          <div class="node-key-value-item-value">
            <span>{{ props.properties.options.enhance.path}}</span>
          </div>
        </div>
        <div class="node-key-value-item">
          <div class="node-key-value-item-key" style="width: 58px"><span>输出变量</span></div>
          <div class="node-key-value-item-value">
            <span>{{ getOutputParams }}</span>
          </div>
        </div>
        <div class="ellipsis" style="font-size: 12px;color:#666;">{{ getRemarks }}</div>
      </div>
    </div>
  </node-common>
</template>

<script setup>
import { ref, onMounted, reactive, watch,computed } from 'vue';
import NodeCommon from '../base-node.vue';
const menus = ref([{ name: '删除', key: 'delete', color: '#fb363f' }]);

const props = defineProps({
  model: {
    type: Object,
    default: null
  },
  graphModel: {
    type: Object,
    default: null
  },
  properties: {
    type: Object,
    default: null
  },
  isHovered: {
    type: Boolean,
    default: false
  },
  isSelected: {
    type: Boolean,
    default: false
  }
});
const getInputParams = computed(() => {
  return props.properties?.inputParams?.map(item => item.name).join(',');
});
const getOutputParams = computed(() => {
  return props.properties?.outputParams?.map(item => item.name).join(',');
});
const getRemarks = computed(() => {
  return props.properties?.remarks;
});
const handleMenu = item => {
  if (item.key === 'delete') {
    props.graphModel.deleteNode(props.model.id)
  }
};
</script>
<style  lang='less' scoped>
.node-key-value {
  display: flex;
  flex-direction: column;
}
.node-key-value-item {
  display: flex;
  flex-direction: row;
}
.node-key-value-item-key {
  color: #999;
  text-align: right;
  margin-right: 8px;
}
.node-key-value-item-value {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>